<section class="content-header">
  <h1>
    今日消费
  </h1>
  <ol class="breadcrumb">
    <li>
      <a routerLink="/">
        <i class="fa fa-dashboard"></i> 主页</a>
    </li>
    <li class="active">
      <a>今日消费</a>
    </li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <!-- <div class="box-header with-border">
          <h3 class="box-title">Bordered Table</h3>
        </div> -->
        <div class="box-body">
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th style="width: 10px">#</th>
                <th style="width:150px">消费</th>
                <th>详情</th>
                <th style="width:50px">金额</th>
                <th style="width:150px">时间</th>
                <th style="width:100px">操作</th>
              </tr>
              <tr *ngFor="let bill of bills;let i = index">
                <td>{{ i+1 }}</td>
                <td>{{ bill.name }}</td>
                <td>
                  {{ bill.desc }}
                </td>
                <td>{{bill.cost}}</td>
                <td>{{ bill.date | date:"HH:mm" }}</td>

                <td>
                  <span (click)="update(bill.id)" class="btn-xs bg-yellow">修改</span>
                  <span class="btn-xs bg-red">删除</span>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <div class="box-footer clearfix">
          <h4>总计：{{total}}
            <a (click)="update(0)" class="btn btn-primary pull-right" style="left: 20px;margin-right: 30px">新增</a>
          </h4>
          
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">统计</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
        <div class="box-body">
          <canvas id="pieChart" #myChart style="height: 354px; width: 708px;" width="708" height="354"></canvas>
        </div>
        <!-- /.box-body -->
      </div>
    </div>
  </div>
</section>